<template>
  <footer class="PublicFooter">
    <router-link
      v-for="value of icon"
      :key="value.name"
      :to="value.path"
      active-class="active"
    >
      <span :class="value.iconclass"></span>
      <span class="font">{{ value.name }}</span>
    </router-link>
  </footer>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const icon = reactive([
      {
        name: "首页",
        path: "/home/main",
        iconclass: "iconfont icon-shouji",
      },
      {
        name: "樊登读书",
        path: "/home/speak",
        iconclass: "iconfont icon-dushu",
      },
      {
        name: "发现",
        path: "/home/find",
        iconclass: "iconfont icon-zhinanzhen",
      },
      {
        name: "我的",
        path: "/home/mine",
        iconclass: "iconfont icon-wode2",
      },
    ]);
    return {
      icon,
    };
  },
};
</script>
<style lang="less">
.PublicFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: white;
  height: 50px;
  width: 100%;
  a {
    width: 25%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .iconfont {
      font-size: 24px;
      margin-bottom: 5px;
    }
  }
  .font {
    color: black;
  }
  .active {
    color: #fad502;
  }
}
</style>
